<template>
  <div class="console">
    <!--数据卡片-->
    <n-grid cols="1 s:2 m:3 l:4 xl:6 2xl:6" responsive="screen" :x-gap="12" :y-gap="8">
      <n-grid-item>
        <NCard
          title="累计注册玩家"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium"/>
            <CountTo v-else :startVal="0" :endVal="visits.totalRegistPlayer" class="text-3xl" style="color:#536dfe"/>
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="累计付费玩家"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium"/>
            <CountTo v-else :startVal="0" :endVal="visits.totalRechargePlayer" class="text-3xl" style="color:#2d8cf0"/>
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="累计流水"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium"/>
            <CountTo v-else :startVal="0" decimals="2" :endVal="visits.totalRechargeMoeny" class="text-3xl" style="color:#2d8cf0"/>
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="今日流水"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium"/>
            <CountTo v-else :startVal="0" decimals="2"  :endVal="visits.todayRechargeMoeny" class="text-3xl" style="color:#009688"/>
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="本周流水"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium"/>
            <CountTo v-else :startVal="0" decimals="2" :endVal="visits.weekRechargeMoeny" class="text-3xl" style="color:#009688"/>
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="本月流水"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium"/>
            <CountTo v-else :startVal="0"  decimals="2" :endVal="visits.monthRechargeMoeny" class="text-3xl" style="color:#009688"/>
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="今日注册"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium"/>
            <CountTo v-else :startVal="0" :endVal="visits.todayRegistPlayer" class="text-3xl" style="color:#536dfe"/>
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="本周注册"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium"/>
            <CountTo v-else :startVal="0" :endVal="visits.weekRegistPlayer" class="text-3xl" style="color:#536dfe"/>
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="本月注册"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium"/>
            <CountTo v-else :startVal="0" :endVal="visits.monthRegistPlayer" class="text-3xl" style="color:#536dfe"/>
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="今日活跃"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium"/>
            <CountTo v-else :startVal="0" :endVal="visits.dayActivePlayer" class="text-3xl"/>
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="直播红包"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium"/>
            <CountTo v-else :startVal="0" :endVal="visits.totalLiveRed" class="text-3xl"/>
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="今日充值人数"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium"/>
            <CountTo v-else :startVal="0" :endVal="visits.todayRechargePeople" class="text-3xl" style="color:#2d8cf0"/>
          </div>
        </NCard>
      </n-grid-item>
    </n-grid>
    <n-grid :cos="1" :x-gap="24">
      <n-gi :span="24">
        <n-card :bordered="false" class="proCard" style="margin-top: 10px">
          <n-tabs type="line" animated>
            <n-tab-pane name="当月活跃玩家" tab="当月活跃玩家">
              <DataOverviewChart :dataSource="visits.midYearActivePeople"/>
            </n-tab-pane>
            <n-tab-pane name="当月新增玩家" tab="当月新增玩家">
              <DataOverviewChart :dataSource="visits.midYearRegistPeople"/>
            </n-tab-pane>
            <n-tab-pane name="当月流水" tab="当月流水">
              <DataOverviewChart :dataSource="visits.midYearRechargeMoeny"/>
            </n-tab-pane>
            <n-tab-pane name="ARPU" tab="ARPU">
              <DataOverviewChart :dataSource="visits.midYearARPU"/>
            </n-tab-pane>
            <n-tab-pane name="付费率" tab="付费率">
              <DataOverviewChart :dataSource="visits.midYearPayRate"/>
            </n-tab-pane>
            <n-tab-pane name="ARPPU" tab="ARPPU">
              <DataOverviewChart :dataSource="visits.midYearARPPU"/>
            </n-tab-pane>
          </n-tabs>
          <n-radio-group
            v-model:value="params.monthBefore"
            name="left-size"
            @update:value="updateMonth"
            style="position: absolute;top: 0;right: 30px;margin-top: 1%;"
          >
            <n-radio-button :value=12>
              一年
            </n-radio-button>
            <n-radio-button :value=6>
              半年
            </n-radio-button>
            <n-radio-button :value=3>
              三个月
            </n-radio-button>
          </n-radio-group>
        </n-card>

      </n-gi>
    </n-grid>
  </div>
</template>
<script lang="ts" setup>
  import {ref, onMounted, unref, reactive} from 'vue';
  import {CountTo} from '@/components/CountTo/index';
  import {getDataOverView} from "../../../api/data/dataOverView";
  import DataOverviewChart from "./dataOverviewChart.vue"

  const loading = ref(true);
  const visits = ref<any>({});
  const params = reactive({
    monthBefore: 6
  });

  onMounted(async () => {
    loading.value = true;
    visits.value  = await getDataOverView(params);
    loading.value = false;
  });

  async function updateMonth(value) {
    loading.value = true;
    visits.value= await getDataOverView(params);
    loading.value = false;
  }
</script>

<style lang="less" scoped></style>
